<template>
	<el-dialog v-model="dialogVisible" :title="title" width="500" :before-close="handleClose">
		<el-form :model="from" class="align-center search-form ml-2" :rules="rules" ref="formRef">
			<el-form-item class="label mt-4" label-width="120px" :label="$t('bar.poCode')">
				<el-input v-model="from.poCode" disabled />
			</el-form-item>
			<el-form-item class="label mt-4" label-width="120px" :label="$t('bar.poLine')">
				<el-input v-model="from.poLine" disabled />
			</el-form-item>
			<el-form-item class="label mt-4" label-width="120px" :label="$t('poheader.supplierName')">
				<el-input v-model="from.supplierName" disabled />
			</el-form-item>
			<el-form-item class="label mt-4" label-width="120px" :label="$t('agv.materialCode')">
				<el-input v-model="from.materialCode" disabled />
			</el-form-item>
			<el-form-item class="label mt-4" label-width="120px" :label="$t('agv.materialName')">
				<el-input v-model="from.materialName" disabled />
			</el-form-item>
			<el-form-item class="label mt-4" label-width="120px" :label="$t('bom.unit')">
				<el-input v-model="from.unit" disabled />
			</el-form-item>
			<el-form-item class="label mt-4" label-width="120px" :label="$t('basMaterial.specification')">
				<el-input v-model="from.spec" disabled />
			</el-form-item>
			<el-form-item class="label mt-4" label-width="120px" :label="$t('upgrade.ArrivalDate')" prop="time">
				<el-date-picker
					v-model="from.time"
					type="date"
          style="width: 100%"
					range-separator="-"
					format="YYYY-MM-DD"
					value-format="YYYY-MM-DD"
					:disabled-date="disabledDate"
					:start-placeholder="$t('wms.startTime')"
					:end-placeholder="$t('wms.endTime')"
					class="custom-date-picker"
				/>
			</el-form-item>
			<el-form-item class="label mt-4" label-width="120px" :label="$t('upgrade.shipment')" prop="shippingQty">
				<el-input v-model="from.shippingQty" type="number" clearable :placeholder="$t('client.inputResourceIdsTip')" />
			</el-form-item>
			<el-form-item class="label mt-4" label-width="120px" :label="$t('upgrade.shipmentDate')" prop="time2">
				<el-date-picker
					v-model="from.time2"
					type="date"
          style="width: 100%"
					range-separator="-"
					format="YYYY-MM-DD"
					value-format="YYYY-MM-DD"
					:disabled-date="disabledDate"
					:start-placeholder="$t('wms.startTime')"
					:end-placeholder="$t('wms.endTime')"
					class="custom-date-picker"
				/>
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button v-loading="loading" type="primary" @click="onConfirm">{{$t('user.logOutConfirm')}}</el-button>
				<el-button @click="handleClose"> {{$t('user.logOutCancel')}} </el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { UpdatePoShippingDetailt, createPoShippingDetail } from '/@/api/platform/mes/wmsCheckstock';
import { ElMessage } from 'element-plus';
import {useI18n} from 'vue-i18n';

const {t} = useI18n();
const dialogVisible = ref(false);
const title = ref('');
const from = reactive({
	poCode: '',
	orderNo: '',
	poLine: '',
	supplierCode: '',
	supplierName: '',
	materialCode: '',
	materialName: '',
	shippingQty: null,
	unit: '',
	spec: '',
	time: [],
	time2: [],
	status: '',
});
const loading = ref(false);
const handleClose = () => {
	dialogVisible.value = false;
	formRef.value?.resetFields();
};
const handleOpen = (row, text) => {
	from.orderNo = row.orderNo;
	from.supplierCode = row.supplierCode;
	from.poCode = row.poCode;
	from.poLine = row.poLine;
	from.supplierName = row.supplierName;
	from.materialCode = row.materialCode;
	from.materialName = row.materialName;
	from.unit = row.unit;
	from.spec = row.spec;
	from.time = row.estimatedArrivalDate;
	from.time2 = row.shippingDate;
	from.shippingQty = row.shippingQty;
	from.status = text;
  title.value = text == 'add' ? t('order.fahuo') : t('order.xiug');
	dialogVisible.value = true;
};

const rules = {
  time: [
    { required: true, message: t('client.inputResourceIdsTip'), trigger: 'change' }
  ],
  shippingQty: [
    { required: true, message: t('client.inputResourceIdsTip'), trigger: 'blur' }
  ],
  time2: [
    { required: true, message: t('client.inputResourceIdsTip'), trigger: 'change' }
  ]
};
const formRef = ref();

const onConfirm = async () => {
  await formRef.value?.validate();
  if (from.status == 'add') {
    await createDate();
  } else if (from.status == 'edit') {
    await updateDate();
  }
};

const createDate = async () => {
	loading.value = true;
	try {
		const params = {
			...from,
			estimatedArrivalDate: from.time,
			shippingDate: from.time2,
		};
	let res =	await createPoShippingDetail(params);
    if(res.ok){
      ElMessage.success(t('common.optSuccessText'));
      dialogVisible.value = false
    }
	} catch (e) {
    ElMessage.warning(e.msg);
	} finally {
		loading.value = false;
	}
};
const updateDate = async () => {
	loading.value = true;
	try {
		const params = {
			...from,
			estimatedArrivalDate: from.time,
			shippingDate: from.time2,
		};
	  let res =	await UpdatePoShippingDetailt(params);
    if(res.ok){
      ElMessage.success(t('common.optSuccessText'));
      dialogVisible.value = false;
    }
	} catch (e) {
    ElMessage.warning(e.msg);
	} finally {
		loading.value = false;
	}
};

// 暴露handleOpen方法
defineExpose({
	handleOpen,
});
</script>

<style scoped lang="scss"></style>
